<template>
    <div>
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">登录</h1>
		</header>
		<div class="mui-content">
			<form id='login-form' class="mui-input-group" name='login-form'>
				<div class="mui-input-row">
					<label>账号</label>
					<input id='account' type="text" class="mui-input-clear mui-input" placeholder="请输入账号" v-model="account">
				</div>
				<div class="mui-input-row">
					<label>密码</label>
					<input id='password' type="password" class="mui-input-clear mui-input" placeholder="请输入密码" v-model="psw">
				</div>
			</form>
			<div class="mui-content-padded">
				<button id='login' type="button" class="mui-btn mui-btn-block mui-btn-primary" @click="login">登录</button>
				<div class="link-area"><a id='reg' @click="toreg">注册账号</a> <span class="spliter">|</span> <a id='forgetPassword' @click="tofpw">忘记密码</a>
				</div>
			</div>
			<div class="mui-content-padded oauth-area">

			</div>
		</div>
    </div>
</template>
<script>
import Vue from 'vue'
import axios from 'axios'
import mui from '../../mui/js/mui.js'
export default {
    name: "Login",
    data(){
        return{
            psw:'',
            account:''
        }
    },
    methods:{
        toreg(){
            this.$router.push('/regist')
        },
        tofpw(){
            this.$router.push('/forgetpw')
        },
        login(){
            if(this.account==''){
                mui.alert("请输入账号!")
            }else if(this.psw==''){
                mui.alert("请输入密码!")
            }else{
                this.getUsersData()
            }
        },
        getUsersData(){
                var LoginUserInfoUrl = '../static/User.json'
                axios.get(LoginUserInfoUrl)
                .then(response => {
                    this.getUsersDataSucc(response)
                })
        },
        getUsersDataSucc(res){
            if(res.status && res.data){
                const userlist=res.data
                userlist.forEach(user => {
                    if(user.account==this.account && user.psw==this.psw){
                        mui.alert("登陆成功!")
                        this.$router.push('/BoBo/People')
                        const LoginUserInfo=user
                        this.ChangeLoginUser(LoginUserInfo)
                    }
                });
            }else{
                mui.alert("由于未知原因登陆失败!")
            }
        },
        ChangeLoginUser(LoginUserInfo){
            Vue.prototype.$globalLoginUer=LoginUserInfo
            localStorage.setItem('user', JSON.stringify(LoginUserInfo));
        }
    }
}
</script>

<style scoped lang="stylus">
.area {
    margin: 20px auto 0px auto;
}

.mui-input-group {
    margin-top: 10px;
}

.mui-input-group:first-child {
    margin-top: 20px;
}

.mui-input-group label {
    width: 22%;
}

.mui-input-row label~input,
.mui-input-row label~select,
.mui-input-row label~textarea {
    width: 78%;
}

.mui-checkbox input[type=checkbox],
.mui-radio input[type=radio] {
    top: 6px;
}

.mui-content-padded {
    margin-top: 25px;
}

.mui-btn {
    padding: 10px;
}

.link-area {
    display: block;
    margin-top: 25px;
    text-align: center;
}

.spliter {
    color: #bbb;
    padding: 0px 8px;
}

.oauth-area {
    position: absolute;
    bottom: 20px;
    left: 0px;
    text-align: center;
    width: 100%;
    padding: 0px;
    margin: 0px;
}

.oauth-area .oauth-btn {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-size: 30px 30px;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 0px 20px;
    /*-webkit-filter: grayscale(100%); */
    border: solid 1px #ddd;
    border-radius: 25px;
}

.oauth-area .oauth-btn:active {
    border: solid 1px #aaa;
}

.oauth-area .oauth-btn.disabled {
    background-color: #ddd;
}
</style>